<script setup lang="ts">
import { message } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'; // 获取路由参数
import CourseDesc from './CourseFolderInfo.vue'; // 引入子组件
import { addCourseToFavorites, getCourseInformationById, getFavoriteList, likeCourse, removeCourseFromFavorites } from '@/api/study/course';
import router from '@/router';

// 使用路由获取参数
const route = useRoute();
const courseId = ref(route.params.courseId as string);

// 课程信息
const courseInfo = ref<any>(null);
const hasLiked = ref(false); // 是否已点赞
const isFavorite = ref(false); // 是否已收藏
const loadingFavorite = ref(true); // 判断收藏状态是否加载完成

// 获取课程信息
const fetchCourseInformation = async () => {
  try {
    const response = await getCourseInformationById(courseId.value)

    courseInfo.value = response; // 使用响应数据
    hasLiked.value = response.userHasLiked; // 设置用户是否已经点赞
  }
  catch (error) {
    message.error('获取课程信息失败');
  }
};

// 检查是否收藏
const checkIfFavorited = async () => {
  try {
    const response = await getFavoriteList();

    const favoriteCourses = response;
    isFavorite.value = favoriteCourses.some((course: { courseId: string }) => course.courseId === courseId.value);
  }
  catch (error) {
    message.error('获取收藏信息失败');
  }
  finally {
    loadingFavorite.value = false; // 收藏状态加载完成
  }
};

// 处理点赞
const handleLike = async () => {
  if (hasLiked.value) {
    message.warning('您已经点过赞了');
    return;
  }

  try {
    await likeCourse(courseId.value);

    courseInfo.value.viewNum++; // 更新点赞后的查看数
    hasLiked.value = true;
  }
  catch (error) {
    message.error('点赞请求失败');
  }
};

// 处理收藏和取消收藏
const handleFavorite = async () => {
  try {
    if (isFavorite.value) {
      // 取消收藏
      await removeCourseFromFavorites(courseId.value);
      isFavorite.value = false; // 更新收藏状态
      message.success('已取消收藏');
    }
    else {
      // 添加收藏
      await addCourseToFavorites(courseId.value);

      isFavorite.value = true; // 更新收藏状态
      message.success('已收藏课程');
    }
  }
  catch (error) {
    message.error('操作失败，请稍后再试');
  }
};

// 生命周期钩子
onMounted(() => {
  fetchCourseInformation();
  checkIfFavorited();
});

const goBack = () => {
  router.replace('/user/learning_home');
};
</script>

<template>
  <div v-if="courseInfo" class="projectDetailContainer">
    <nav>
      <div class="navtop">
        <!-- 显示课程名称 -->
        <span class="title">{{ courseInfo.courseName }}</span>
      </div>

      <!-- 课程标签 -->
      <div style="margin: 0.7rem">
        <a-space v-if="courseInfo.courseTag">
          <span class="tags">{{ courseInfo.courseTag }}</span>
        </a-space>
      </div>

      <!-- 课程描述 -->
      <div class="bottom">
        <div>
          {{ courseInfo.courseDescription }}
        </div>
      </div>

      <!-- 移动端适配的点赞和收藏按钮 -->
      <a-flex justify="end" class="action-buttons" style="gap: 16px;margin-top: 1rem;">
        <a-button type="primary" @click="goBack">
          返回课程页
        </a-button>
        <a-button :disabled="hasLiked" @click="handleLike">
          赞 {{ courseInfo.viewNum }}
        </a-button>
        <a-button :disabled="loadingFavorite" @click="handleFavorite">
          {{ loadingFavorite ? '加载中...' : (isFavorite ? '已收藏' : '收藏') }}
        </a-button>
      </a-flex>
    </nav>

    <!-- 讲师信息 -->
    <div class="projectLeftCard">
      <a-card>
        <div class="projectLeftCardBottom">
          <div>讲师</div>
          <div v-for="teacher in courseInfo.teacher" :key="teacher.teacherId" style="display: flex; margin-bottom: 1em">
            <div
              style="width: 80px; height: 80px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center"
            >
              <img
                :src="teacher.teacherImage" :alt="teacher.teacherName"
                style="width: 100%; height: 100%; object-fit: cover"
              >
            </div>
            <div style="margin-left: 1em">
              <p style="margin: 0 0 .5em 0">
                <a style="font-size: 18px">{{ teacher.teacherName }}</a>
              </p>
              <p style="margin: 0 0 .5em 0; font-size: 17px">
                {{ teacher.teacherJob }}, {{ teacher.teacherTitle }}
              </p>
              <p style="margin: 0 0 .5em 0; font-size: 18px">
                {{ teacher.teacherSchool }}
              </p>
            </div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 课程详情卡片 -->
    <div class="projectContent">
      <a-card class="projectCard">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="课程介绍">
            <!-- Course Summary -->
            <div>
              <span style="font-size: 1.2rem;font-weight: 600">课程摘要</span>
              <div class="cardWrapper" style="margin-top: 0px">
                <p>
                  {{ courseInfo.courseDescription }}
                </p>
              </div>
            </div>
            <CourseDesc />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.projectDetailContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2rem; // 原来: padding: 2em;
  background-color: #f5f5f5;
  box-sizing: border-box;

  .tags {
        display: inline-block;
        font-size: 1rem;
        background-color: #f2f2f4;
        color: rgba(16, 16, 16, 1);
        padding: 0.5em;
        border-radius: em(5px);
  }

  nav {
    background-color: white;
    padding: 1rem 2rem; // 原来: padding: 1em 2em;
    margin-bottom: 1rem; // 原来: margin-bottom: 1em;
    border-radius: 0.3rem; // 原来: border-radius: 0.3em;

    .navtop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1rem;

      .title {
        font-size: 1.45rem; // 原来: font-size: em(36px);
        font-weight: 800;
      }

    }
  }

  .projectLeftCard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; // 原来: gap: 12px;
    margin-bottom: 1rem; // 添加间距分隔

    .projectLeftCardBottom {
      padding-top: 0.75rem; // 原来: padding-top: 12px;
      border-top: 1px solid #f5f5f5;

      &>div:nth-child(1) {
        margin-bottom: 12px;
        font-size: 1.3rem;
        font-weight: bold;
      }

      &>div:nth-child(2) {
        display: flex;
        align-items: center;
        gap: 12px;

        &>div:nth-child(1) {
          width: 6.25rem; // 原来: width: 100px;
          height: 6.25rem; // 原来: height: 100px;

          &>img {
            height: 100%;
            width: 100%;
            border-radius: 50%;
          }
        }

        &>div:nth-child(2) {
          p {
            line-height: 1;
          }

          &>p:nth-child(1) {
            color: #63c1ff;
          }
        }
      }

      .teacher-info { // 新增类名
        display: flex;
        gap: 0.75rem; // 原来: gap: 12px;
        margin-bottom: 1em;

        .teacher-image {
          width: 6.25rem; // 原来: width: 100px;
          height: 6.25rem; // 原来: height: 100px;
          overflow: hidden;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .teacher-details {
          margin-left: 1rem;
          p {
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
            line-height: 1.5;
          }

          p:first-child {
            color: #63c1ff;
            font-weight: bold;
          }
        }
      }
    }

    .projectContent {
      display: flex;
      flex-direction: column; // 保持垂直布局
      gap: 1rem; // 原来: gap: 16px;

      @media (min-width: 769px) {
        flex-direction: row; // 大于768px时恢复行方向
        gap: 1rem; // 保持间隔一致
      }

      .projectCard {
        flex: 1;
        background-color: #ffffff;

        :global(.ant-card-body) {
          height: 100% !important;
          padding-top: 0 !important;
        }

        :global(.ant-tabs-tab-btn) {
          font-size: 1.25rem; // 原来: font-size: 1.25em;
        }

        .ant-tabs-tab {
          font-size: 1rem; // 原来: font-size: 1em;
        }

        .ant-tabs-content {
          margin-top: 1rem; // 原来: margin-top: 1em;
        }

        .course-description { // 修改类名
          font-size: 1.1875rem; // 原来: font-size: 19px;
        }
      }
    }

    /* 移动端适配的点赞和收藏按钮 */
    .action-buttons {
      display: flex;
      justify-content: flex-end;

      @media (max-width: 768px) {
        width: 100%;
        justify-content: flex-end;
      }
    }

    @media (max-width: 768px) {
      .projectDetailContainer {
        padding: 1rem; // 调整内边距

        nav {
          .navtop {
            flex-direction: column;
            align-items: flex-start;
          }
        }

        .projectLeftCard {
          .projectLeftCardBottom {
            .teacher-info {
              flex-direction: column;
              align-items: flex-start;
            }
          }
        }

        .projectContent {
          flex-direction: column;
        }

      }
    }
  }
}
</style>
